<template>
    <div>
        <div>
        <el-form ref="form" :model="loginForm" class="loginForm">
            <h3>用户注册</h3>
            <el-form-item>
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item>
                <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
                <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="请输入验证码" style="width:250px"/>
                <img :src="captchaUrl">
            </el-form-item>
            <el-checkbox v-model="checked" class="remember">记住我</el-checkbox>
            <div style="display:flex;">
                <el-button type="primary" style="width:100%" @click="login">登录</el-button>
                <el-button type="primary" style="width:100%;" @click="register">注册</el-button>
            </div>
        </el-form>
    </div>
    </div>
</template>
<script>
    export default {
        name:"Register",
        data() {
            return{
                captchaUrl:'',
                loginForm:{
                    username:'admin',
                    password:'123456',
                    code:''
                },
                checked:true
            }
        },
        methods:{
            login(){
                this.$router.replace('/')
            },
            register(){
                this.$router.replace('/register')
            }
        }
    }
</script>
<style scoped>
    .loginForm{
        border-radius: 15px;
        background-clip: padding-box;
        background: #fff;
        width: 350px;
        margin: 180px auto;
        padding: 15px 35px 15px 35px;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    h3{
        text-align: center;
    }
    .remember{
        margin: 0 0 15px 0;
    }
</style>